<template>
	<div class="yolo-model">
		<div class="menu">
			<div class="menu-item" @click="currentMenu = index" :class="currentMenu == index && 'active'" v-for="(item, index) in menus">{{item}}</div>
		</div>
		<div class="content">
			<Recognize v-if="currentMenu === 0"/>
			<ImgHistory v-if="currentMenu === 1"/>
		</div>
	</div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import Recognize from "./component/Recognize.vue";
import ImgHistory from "./component/ImgHistory.vue";
const menus = ref(['图片识别', '识别历史'])
const currentMenu = ref(0)

</script>

<style lang="scss" scoped>
.yolo-model{
	width: 100%;
	height: calc(100vh - 60px);
	display: flex;
	.menu{
		width: 240px;
		height: 100%;
		overflow-y: scroll;
		box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.5);
		//隐藏滚动条
		&::-webkit-scrollbar {
			display: none;
		}

		.menu-item{
			height: 60px;
			width: 100%;
			padding: 0 8px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 16px;
			color: #303133;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s;
			&:hover{
				background: rgb(159.5, 206.5, 255, 0.4);
			}
		}
		.active{
			background: rgb(159.5, 206.5, 255, 0.4)
		}
	}
	.content{
		flex: 1;
		height: 100%;
		overflow-y: scroll;
		&::-webkit-scrollbar {
			display: none;
		}
	}
}
</style>
